$color: #49c0eb #aaa #e8e8e8;

@import "mixin";
@import "bootstrap";
// @import "reset";
@import "font-face";
@import "variables";
@import "loading-bar";
@import "ng-table";

html {
	color: #000;
	background: #f5f5f5;
	font-size: 62.5%;
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	position: relative;
	font: 1.4rem/1.5 "Microsoft yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #333;
	background: #f5f5f5;
}

ol,ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

label {
	font-weight: normal;
	margin-bottom: 0;
}

.form-control::-moz-placeholder {
	color: #f1f1f1;
	opacity: 1;
}

.form-control:-ms-input-placeholder {
	color: #f1f1f1;
}

.form-control::-webkit-input-placeholder {
	color: #f1f1f1;
}

.form-control {
	&:focus {
		border-color: none;
		box-shadow: none;
	}
}

.section {

	.search {
		position: relative;
		height: 48px;
		padding: 10px 20px;
		background: nth($color, 1);

		.form-control {
			height: 28px;
			font-size: 1.4rem;
			line-height: 2;
			border-radius: 2.8rem;
			background: nth($color, 1);
			box-shadow: none;
			border-color: #fff;
			color: #fff;
		}

		.fa-search {
		    position: absolute;
		    right: 32px;
		    top: 16px;
		    color: #eee;
		    font-size: 1.6rem;
		}
	}

	.content {
		padding: 10px;
	}
	
	.table-responsive {
		margin-bottom: 0;
		border: none;
	}

	.match-info {
		display: block;
		height: 60px;
		padding: 8px 0; 	
		border: 1px solid nth($color, 3);
		background: #fff;
		transition: background .3s;

		&:hover {
			background: #eee;
		}
	}
	
	.image {
		display: block;
		padding: 0 10px;

		> img {
			border-radius: 100%;
		}
	}

	.title h4 {
		font-size: 16px;
		line-height: 20px;
		color: #000;
		margin: 0 0 8px;
	}

	.title p {
		font-size: 1.4rem;
		line-height: 1;
		color: nth($color, 2);
		margin: 0;
	}

	.text span {
		display: block;
		padding-right: 10px;
		font-size: 1.4rem;
		line-height: 1;
		color: nth($color, 2);
		text-align: right;
	}

	.address {
		margin-bottom: 14px;
	}

}

#match-list .content {
	ul.row {
		margin-left: -10px;
		margin-right: -10px;

		li {
			margin: 8px 0;
		}
	}
}

.subject-list li {
	position: relative;
	height: 40px;
	padding: 0 15px;
	margin: 10px 0;
	border: 1px solid nth($color, 3);
	background: #fff;
	transition: background .3s;
	
	&:after {
		@extend .fa;
		position: absolute;
	    content: "\f054";
	    font-size: 1.6rem;
	    line-height: 2.5;
	    right: 15px;
	    top: 0;
	    color: nth($color, 2);
	}

	&:hover {
		background: #eee;
	}
	
	h5 {
		font-size: 1.6rem;
		line-height: 2.5;
		margin: 0;
		color: nth($color, 1);
	}
}

.mini-marathon {
	min-height: 120px;
	border: 1px solid nth($color, 3);
	background: #fff;

	h5 {
		font-size: 1.6rem;
		line-height: 2.5;
		padding: 0 15px;
		margin: 0;
	}

	li {
		position: relative;
		height: 40px;
		padding: 0 15px;
		font-size: 1.6rem;
		line-height: 2.5;
		color: nth($color, 1);

		&:after {
			@extend .fa;
			position: absolute;
		    content: "\f054";
		    font-size: 1.6rem;
		    line-height: 2.5;
		    right: 15px;
		    top: 0;
		    color: nth($color, 2);
		}

		&:hover {
			background: #eee;
		}
	}
}

.ng-table-filters {
	display: none !important;
}

.table.table-border {
	border: 1px solid nth($color, 3);
	margin-top: 20px;
	background: #fff;

	> thead > tr > th,
	> tbody > tr > td {
		border-bottom: 1px solid nth($color, 3);
	}
}

#score-person {

	.match-info {
		margin-bottom: 1px;
		background: nth($color, 1);
		border-color: nth($color, 1);
		color: #fff;
		
		.title h4,
		.text span, 
		.title p {
			color: #fff;
		}
	}

	> .header {
		min-height: 150px;
		padding: 20px 30px;
		background: nth($color, 1);
		color: #fff;

		.ranking span {
			display: block;
			margin: 0 auto;
			text-align: center;
			font: italic 5rem/2.1 Arial,sans-serif;
			color: #ffda31;
		}
	}
}

@media only screen and (max-width:479px) {
	#no-more-tables {

		table, thead, tbody, th, td, tr {
			display: block
		}

		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

		tr {
			border: 1px solid #ccc;
			margin: 10px 0;
		}

		td {
			border: 0;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
			white-space: normal;
			text-align: left;

			&:before {
				content: attr(data-title-text);
				position: absolute;
				top: 6px;
				left: 6px;
				width: 45%;
				padding-right: 10px;
				white-space: nowrap;
				text-align: left;
				font-weight: bold;
			}
		}
	}
}

.animate {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.animate.ng-enter {
	animation: fadeInDown 0.4s linear 0s 1 alternate;
}

// .animate.ng-leave {
// 	animation: fadeOutLeft 0.4s linear 0s 1 alternate;
// }

@keyframes fadeIn {
	form {
		@include opacity(0);
	}

	to {
		@include opacity(1);
	}
}

@keyframes fadeOut {
	form {
		@include opacity(1);
	}
	
	to {
		@include opacity(0);
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.search-info {
	margin-top: 20px;

	.control-label {
		color: #000;
		margin-top: 7px;
		text-align: right;
	}

	.form-control {
		height: 36px;
		font-size: 1.6rem;
		line-height: 2;
		border-radius: 3.6rem;
		background: none;
		box-shadow: none;
		border-color: #cdcdcd;
		color: nth($color, 2);
	}
	
	.has-success {
		
		.form-control {
			border-color: nth($color, 1);
		}

		.form-control:focus {
			border-color: nth($color, 1);
			box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px nth($color, 1);
		}
		
		.form-control-feedback {
			top: 10px;
			right: 18px;
			color: nth($color, 1);
		}
	}

	.btn-blue {
		width: 80%;
	    text-align: center;
	    margin: 0 auto;
	    display: block;
	    height: 36px;
	    padding: 0;
	    margin-top: 30px;
	    font-size: 1.8rem;
	    color: #fff;
	    background: nth($color, 1);
	    border-radius: 3.6rem;
		transition: all .3s;

	    &:focus, &:active {
			color: #fff;
			background-color: #286090;
	    }
	}
}

.score-team-list {
	margin-top: 20px;
	
	.ranking span {
		font-size: 1.8rem;
		line-height: 2.7777;
		color: #f9236b;
	}

	> li {
		margin: 10px 0;
		padding: 5px 10px;
		border: 1px solid nth($color, 3);
		background: #fff;
	}

	.team-info {

		.con > div {
			width: 50%;
			font-size: 1.2rem;
			color: nth($color, 2);
		}
	}
}

#team-list {

	.match-info {
		background: nth($color, 1);
		border-color: nth($color, 1);
		margin-bottom: 1px;
		
		.title h4,
		.text span, 
		.title p {
			color: #fff;
		}
	}

	.content > .header {
		min-height: 150px;
		padding: 20px;
		background: nth($color, 1);
		color: #fff;

		.ranking span {
			display: block;
			margin: 0 auto;
			text-align: center;
			font: italic 5rem/2.1 Arial,sans-serif;
			color: #ffda31;
		}
	}
}

.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
	transition:all 0.3s;
}

.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
	opacity:0;
	max-height:0;
}

.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
	opacity:1;
	max-height:60px;
}